<template>
  <div class="proInfo">
    <div class="tabs pa-flex-center">
      <div :class="currentIndex == index ? 'checked' : ''" v-for="(item, index) in tabs" :key="index" @click="handleTab(index)">{{ item }}</div>
    </div>
    <!-- 项目信息 -->
    <div class="proInfoPart" v-show="contentVisible == 0">
      <PaTable v-if="projectId" :detailId="projectId"></PaTable>
    </div>
    <!-- 材料(批文)信息 -->
    <div v-show="contentVisible == 1">
      <page1 :project-id="projectId" style="margin-top: 20px;"/>
      <!-- <div class="filter pa-jc-between">
        <div class="search">
          事项名称 <el-input v-model="eventName" placeholder="事项名称" class="input"></el-input>
          <el-button class="search-button" @click="getProjectFile">搜索</el-button>
        </div>
        <el-button class="search-button">批量下载</el-button>
      </div>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" :index="indexMethod" label="序号" width="80"> </el-table-column>
        <el-table-column prop="eventName" label="事项名称"> </el-table-column>
        <el-table-column prop="materialName" label="附件名称"> </el-table-column>
        <el-table-column prop="updateTime" label="修改日期"> </el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <span class="handle pa-mr-2" @click="preview(scope.row.file)">预览</span>
            <span class="handle" @click="preview(scope.row.file)">下载</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> -->
    </div>
    <div v-show="contentVisible == 2">
      <page2 :project-id="projectId" style="margin-top: 20px;"/>
    </div>
  </div>
</template>
<script>
import { getProjectFileApi } from '@/api/manageApi.js'
import PaTable from '@/components/PaTable'
import Page1 from "./pages/page1.vue";
import Page2 from "./pages/page2.vue";
export default {
  components: {
    PaTable,
    Page1,
    Page2
  },
  data() {
    return {
      tabs: ['项目信息', '申报材料信息','批文信息'],
      currentIndex: 0,
      contentVisible: 0,
      eventName: '',
      projectId: '',
      tableData: [],
      current: 1,
      pageSize: 10,
      total: 0
    }
  },
  beforeRouteEnter: (to, from, next) => {
    to.meta.title = to.query.name
    next()
  },
  mounted() {
    if (this.$route.query) {
      this.projectId = this.$route.query.projectId
    }
    this.getProjectFile()
  },
  methods: {
    indexMethod(index) {
      return index < 10 ? '0' + (index + 1) : index + 1
    },
    handleSelectionChange() {},
    handleSizeChange(val) {
      this.pageSize = val
      this.getProjectFile()
    },
    handleCurrentChange(val) {
      this.current = val
      this.getProjectFile()
    },
    handleTab(index) {
      this.currentIndex = index
      this.contentVisible = index
    },
    // 预览
    preview(url) {
      window.open(url, '_blank')
    },
    // 材料信息
    getProjectFile() {
      getProjectFileApi({
        projectId: this.projectId,
        pageNo: this.current,
        pageSize: this.pageSize,
        eventName: this.eventName
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.proInfo {
  .tabs {
    width: 550px;
    height: 62px;
    background: #dfe9ff;
    border-radius: 31px;
    font-size: 20px;
    div {
      &:first-child {
        width: 164px;
        
      }
      &:last-child {
        width: 165px;
        margin-right: 0px;
      }
      width: 195px;
      margin-right: 40px;
      height: 46px;
      text-align: center;
      line-height: 46px;
      cursor: pointer;
    }
    .checked {
      background: #3d78ff;
      border-radius: 23px;
      color: #fff;
    }
  }
  .proInfoPart {
    margin-top: 33px;
  }
  .filter {
    margin-top: 44px;
    .search {
      margin-bottom: 30px;
      .input {
        width: 215px;
        height: 48px;
        box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
        border-radius: 14px;
        margin-left: 16px;
      }
    }
    .search-button {
      width: 90px;
      height: 41px;
      background: #4880ff;
      border-radius: 5px;
      margin-left: 24px;
      color: #fff;
      padding: 0;
    }
  }
  .handle {
    font-size: 18px;
    color: #3f8cff;
    cursor: pointer;
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
  }
}
</style>
